import styled from 'styled-components';

export const HomeStyle = styled.div`
  .home-container{
    background-color: #f5f5f5;
    .home-box{
      margin: '0 .32rem';
      overflow: 'hidden';
      padding-top: '.16rem';
      .home-bt-style{
        
      }
    }
    
  }
`

export const CartOptionStyle = styled.div`
  .cart-option{
  /* height: 3.28rem; */
  border-top: solid 1px rgba(71, 71, 71, .2);
  border-bottom: solid 1px rgba(71, 71, 71, .2);
  align-items: flex-start;
  .option-items{
    width: 100%;
    .option-text{
      font-size: .4rem;
      font-weight: bold;
      /* margin-bottom: .39rem; */
      text-align: left;


    }

    ul{
      width: 100%;
      justify-content: flex-start;
      margin-top: .39rem;

      li{
        flex: calc( 1 / 3 );
        /* width: 1.96rem; */
        height: .65rem;
        border: 1px solid #DADADA;
        border-radius: .15rem;
        line-height: .65rem;
        margin-right:  .43rem;
      }
      li:nth-child(3n+3){
        /* 选择三的倍数 */
        margin-right: 0;
      }

      .active{
        background-color: #ff762e;
        color: white;
      }
    }
  }

}
`


//  商品详情
export const GoodsDetailStyle = styled.div`

    .goods-detail-box{
      padding: .32rem .32rem;
      box-sizing: border-box;
      margin-top: .13rem;
      background-color: white;
      border-radius: .16rem;
    }

    .main{
      background-color: #F5F5F5;
      overflow: scroll;
      overflow-x: hidden;
      margin-bottom: env(safe-area-inset-bottom);
    }

    .top{
      height: 5.99rem;
      /* background-image: url(https://res.lexiangpingou.cn/images/826/2020/09/guud8S8duk5sz8nzkUlOnd8SNo85Yn.png);
      background-size: 100%; */
    }

    .goods-detail-status{

      height: 1.32rem;
      background-image: url(https://res.lexiangpingou.cn/images/826/2020/09/t7F73flfg4X2242fc2fR2u2LcclFx3.png);
      background-size: 100%;
      background-repeat: no-repeat;
      .container{
        height: 100%;
        .left{
          /* align-items: stretch; */
          /* justify-content: stretch; */
          margin-left: .32rem;
          width: 3.11rem;
           .price{
             color: white;
             span:nth-child(1){
              font-weight: bold;
              font-size: .43rem;
              margin-right: .2rem;
             }
             span:nth-child(2){
              text-decoration: line-through;
             }
           }

           .pinghuo-status{
             justify-content: unset;
             padding: 0 .1rem;
             border-radius: .75rem;
             box-shadow: 1px 1px 1px rgba(193, 193, 193, .3);
             text-align:center;
             width: 100%;
             height:.28rem;
             background-color: white;
              .yuan{
                height:.14rem;
                width: .14rem;
                background-color: #C1C1C1;
                border-radius: 50%;
                margin-right: .17rem;
              }
           }

        }

        .center{
          /* width: 1.64rem; */

          .pinghuo-status-text{
            margin-top: .4rem;
              color: white;
              p{
                font-size: .24rem;
                font-weight: 500;
              }
          }
        }
        .right{
          height: 100%;
          width: 4.2rem;
          margin-right: .16rem;
            .timer{
              justify-content: space-around;
              height: 100%;
              .timer-title{
                font-size: .29rem;
                font-weight: bold;
                color:#FF762E;
              }
              .timers{
                justify-content: space-around;
                height: .5rem;
                width: 100%;
                .cube{
                  margin-left: .08rem;
                  width: .51rem;
                  height: .51rem;
                  background:#FF762E;
                  text-align: center;
                  span{
                    color: white;
                    line-height: .51rem;
                    font-weight: bold;
                  }
                }
              }
            }
        }
      }

    }

    .content{
      margin: .32rem .32rem;
      margin-bottom: 1.38rem;

      .goods-title{
        box-sizing: border-box;
        /* height: 2.79rem; */
        background-color: white;
        border-radius: .13rem;
        padding: .32rem .32rem;
          .title-text{
            width: 100%;
            /* height: 1.12rem; */
            color: #474747;
            font-size: .4rem;
            font-weight: 800;

            /* overflow: hidden; 隐藏溢出部分 */
            /* text-overflow: ellipsis;  显示省略符号来代表被隐藏的文本 */
            /* word-wrap:break-word; 内容存在英文或数字时强制换行 */
            /* display: -webkit-box;         将对象作为弹性伸缩盒子模型显示 */
            /* -webkit-box-orient: vertical; 设置盒子内排列顺序为纵向 */
            /* -webkit-line-clamp: 2;        限制块元素显示的文本的行数 */
          }

          .title-option{
            padding-top: .67rem;
            justify-content: space-around;
            img{
              width: .4rem;
              height: .4rem;
            }

            span{
              margin-left: .16rem;
              color: #C1C1C1;
            }
           
          }

      }

      .goods-option{
        /* height: 2.13rem; */
        box-sizing: border-box;
        margin-top: .13rem;
        padding: .32rem .32rem;
        background-color: white;
        border-radius: .16rem;
        align-items: flex-start;
        
        .option-items{
          /* width: 7.85rem; */
          
          .option-text{
            color: #474747;
            font-weight: bold;
            margin-bottom: .32rem;
          }

          ul{
            flex-wrap: wrap;
            justify-content: unset;
            
            .active{
              background: #FF762E;
            }

            li{
              color: white;
              background: #C1C1C1;
              padding: .15rem .25rem;
              margin-right: .32rem;
              border-radius: .13rem;
              margin-bottom: .32rem;
            }
            li:nth-child(3n+3){
              /* 选择三的倍数 */
              /* margin-right: 0; */
            }
          }
        }
      }

      .delivery-info{
        /* height: 2.2rem; */
        margin-top: .16rem;
        color: #474747;
        justify-content: unset;
        
       

        ul{
          width: 100%;
          justify-content: flex-start;
          align-items: flex-start;
          li{
            margin-bottom: .32rem;
            width: 100%;

            .service{
              width: 6rem;
              b{
                margin-left: .1rem;
              }
             
            }

            .service-switch{
                width: .21rem;
                height: .21rem;
                display: block;
                border-right: 1px solid #888;
                border-top: 1px solid #888;
                opacity: .5;
                /* -webkit-transform: rotate(45deg); 箭头方向可以自由切换角度  */
                /* transform: rotate(45deg); */
              }

            .cart-num-switch{
              width: .21rem;
              height: .21rem;
              display: block;
              border-right: 1px solid #888;
              border-top: 1px solid #888;
              /* -webkit-transform: rotate(135deg); 箭头方向可以自由切换角度  */
              /* transform: rotate(135deg); */

            }

            span:nth-child(2){
              opacity: .5;
            }
          }
          li:last-child{
            margin-bottom: 0;
          }

        .cartNum{
          margin-bottom: .32rem;
          width: 100%;
          table{
            /* table-layout: fixed; */
            border-collapse: collapse ;
            border-spacing: 0 ;
            width: 100%;
            border: solid #D3D4D7 1px;
            thead{
              text-align: center;
              background-color: #F5F5F5;
                tr{
                  /* border-bottom:  solid 1px  #D3D4D7; */
                  td{
                    border-right: solid 1px  #D3D4D7;
                  }
                }
            }
            tbody{
              text-align: center;
              tr{
                td{
                  border-right: solid 1px  #D3D4D7;
                  border-bottom: solid 1px  #D3D4D7;
                }
              }
            }
          }
        }
      }
    
    }

      .goods-detail-info{
        /* height: 5.37rem; */
        margin-top: .16rem;
        ul{
          justify-content: unset;
          .active{
            background-color: #FF762E;
            color: white;
          }
          li{
            width: 50%;
            height: .71rem;
            text-align: center;
            line-height: .71rem;
           
          }
        }

        .tab{
          margin-top: .32rem ;
          .no-content{
            margin-top: .63rem;

            img{
              height: 2.71rem;
              width: 4.31rem;
            }
            p{
              margin-top: .43rem;
              color: #474747;
            }
          }

        }

      }

      .yunfeishouming{
        height: 7.54rem;
        margin-top: .16rem;
        img{
          height: 100%;
          width: 100%;
        }
      }

    }

    .goods-submit{

        padding: 0 .32rem;
        bottom: 0; 
        box-sizing: border-box;
        height: 1.28rem;
        background-color: white;
        z-index:2;
        width: 100%;

        .left{
          color: white;
          width: 5.21rem;
          height: .79rem;
          background-color: #C1C1C1;
          border-radius: .75rem;
          .reduce{
            width: 1.21rem;
            text-align: center;
            line-height: 1.21rem;
          }
          .line{
            width: 1px;
            background-color: white;
            height: 100%;
          }
          .plus{
            width: 1.21rem;
            text-align: center;
            line-height: 1.21rem;
          }
          .goods-num{
            width: 2.84rem;
            color: white;
            border: none;
            background-color:  #C1C1C1;
            text-align: center;
          }
        }

      .submit-button{
        color: white;
        background-color: #FF762E;
        border-radius: .75rem;
        width: 3.83rem;
        height: .79rem;
        line-height: .79rem;
        font-size:  .4rem;
        font-weight: bold;

      }  
    }

`
